<template>
	<view class="listright">
		<view class="author-img">
			<image mode="widthFix" src="../../static/liebiao/10.png" class="img"></image>
			<view class="iconfont icon-jiahao add" v-show="show" @click="hide"></view>
		</view>
		<view class="right-box" @click="changeColor">
			<image :src="iurl" class="img2"></image>
		</view>
		<view class="number">
			{{video.zan}}
		</view>
		<view class=" right-box">
			<image src="../../static/video/talk.png" class="img2"></image>
		</view>
		<view class="number">
			52
		</view>
		<view class="right-box">
			<image src="../../static/video/like.png" class="img2"></image>
		</view>
		<view class="number">
			10
		</view>
		<view class="around">
			<image src="../../static/video/shawto.png" class="img"></image>
		</view>
	</view>
</template>

<script>
	export default {
		flag:'0',
		name: "listRight",
		props: ['video'],
		data() {
			return {
				show: true,
				iurl: '../../static/video/love.png'
			};
		},
		methods: {
			hide() {
				this.show = false
			},
			//点击爱心变红（即点赞）或者变白（取消点赞）
			changeColor() {
				if (this.flag==0) {
					this.iurl = "../../static/video/love.png"
					this.flag==1,
					this.video.zan + 1

				} else {
					this.iurl = "../../static/video/love2.png"
					this.flag==0,
					this.video.zan - 1

				}

			},
			//双击点赞
			// change(){
			// 	this.gxj()
			// 	if(this.video.flag == 1){
			// 		this.iurl = "../../static/video/love2.png"

			// 	}else{
			// 		this.iurl = "../../static/video/love.png"

			// 			}

			// },
			async gxj() {
				uni.request({
					method: 'post',
					data: {
						zan: this.video.zan + 1,
						flag:this.flag
					},
					url: 'http://127.0.0.1:3000/zan',

				})
				console.log(123)
			},
			async gxz() {
				uni.request({
					method: 'post',
					data: {
						zan: this.video.zan - 1,
						flag:this.flag
					},
					url: 'http://127.0.0.1:3000/zan',

				})
				console.log(this.video.flag)

			}



		}
	}
</script>

<style>
	.listright {
		width: 50px;
		margin-right: 30px;
		z-index: 300;
	}

	.author-img {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		border: 3px solid #FFFFFF;
		position: relative;
	}

	.right-box {
		width: 50px;
		height: 40px;
		margin-top: 13px;
		text-align: center;
		line-height: 40px;
		color: #FFFFFF;
		font-size: 30px;
	}

	.img {
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}

	.img2 {
		width: 30px;
		height: 30px;
		border-radius: 50%;
	}

	.number {
		font-size: 10px;
		text-align: center;
		color: #FFFFFF;
	}

	.around {
		margin-top: 15px;
		width: 50px;
		height: 50px;
		animation: rotate 1.5s linear 0.2s infinite;
	}

	.add {
		background-color: red;
		position: absolute;
		bottom: -9px;
		left: 16px;
		text-align: center;
		line-height: 18px;
		color: #FFFFFF;

	}

	@keyframes rotate {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>
